<script setup lang="ts">
import triangleLight from '@/assets/images/misc/triangle-light.png';
import trophy from '@/assets/images/misc/trophy.png';
import { toRefs } from 'vue';
import { useI18n } from 'vue-i18n';

interface RankingProps {
  ranking: number;
}

const props = withDefaults(defineProps<RankingProps>(), {
  ranking: 1,
});

const { ranking } = toRefs(props);

const { t } = useI18n();
</script>

<template>
  <v-card class="greeting-card">
    <v-row class="ma-0 pa-0">
      <v-col cols="8">
        <v-card-title
          class="text-no-wrap pt-2 ps-2 text-[#736B7D] font-semibold"
        >
          {{ t('message.dashboard.ranking') }}
        </v-card-title>
        <v-card-text class="d-flex align-center mt-5 pb-2 ps-2">
          <div>
            <p class="text-xl font-semibold text-[#9255FD]">
              {{ ranking }}
            </p>
          </div>
        </v-card-text>
      </v-col>

      <v-col cols="4">
        <v-img
          cover
          height="180"
          width="159"
          :src="triangleLight"
          class="greeting-card-bg"
        ></v-img>
        <v-img
          contain
          height="108"
          width="83"
          class="greeting-card-trophy"
          :src="trophy"
        ></v-img>
      </v-col>
    </v-row>
  </v-card>
</template>

<style lang="scss" scoped>
.greeting-card {
  position: relative;
  .greeting-card-bg {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .greeting-card-trophy {
    position: absolute;
    bottom: 10%;
    right: 8%;
  }
}
// rtl
.v-application {
  &.v-application--is-rtl {
    .greeting-card-bg {
      right: initial;
      left: 0;
      transform: rotateY(180deg);
    }
    .greeting-card-trophy {
      left: 8%;
      right: initial;
    }
  }
}
</style>
